<template>
	<view class="container">
		<view class="detail-banner">
			<swiper class="banner-swiper" circular>
				<swiper-item v-for="(item, index) in [1]" :key="index" class="banner-item">
					<image :src="goodsInfo.goodsUrl" />
				</swiper-item>
			</swiper>
		</view>
		<!-- <view class="detail-banner">
			<image :src="goodsInfo.goodsUrl" mode="widthFix" style=""/>
		</view> -->
		<view class="detail-info">
			<text class="font32 blue bold">{{goodsInfo.goodsName}}</text>
			<view class="line"></view>
			<view class="flex f-align">
				<view class="flex f-column">
					<view class="flex f-align-end font28 blue bold">
						现价
						<view class="flex f-align-end f-justifyC" style="width: 220rpx;">
							￥<text class="font40" style="margin: 0 5rpx;">{{goodsInfo.goodsMoney}}</text>
						</view>
					</view>
					<view class="flex f-align-end font28 gray777 bold mt10" v-if="goodsInfo.goodsMoney != goodsInfo.originalPrice">
						原价
						<view class="flex f-align-end f-justifyC" style="width: 220rpx;">
							￥<text class="font40" style="margin: 0 5rpx;">{{goodsInfo.originalPrice}}</text>
						</view>
					</view>
				</view>
				<view class="info-r font24 gray333 flex f-column">
					<text class="bold">12道专业洗护</text>
					<text class="mt40">深层次清洁360° 无死角</text>
				</view>
			</view>
			<view class="line"></view>
			<view class="gray999" style="font-size: 22rpx;line-height: 26rpx;">每一件衣精心清洗，进出厂拍照，全程高清监控可追溯12道洗护工序。根据衣包类型，材质款式选择最优定制化洗护方案。全程投保、洗坏赔付，力争达到客户最高满意度，让客户省时，省力、省心。</view>
		</view>
		

		<!-- <view v-if="nodesHtml" class="detail-desc ql-container">
			<rich-text class="ql-editor" :nodes="nodesHtml"></rich-text>
		</view> -->
		<view class="flex f-column" style="padding-top: 400rpx;">
			<view class="bottom-box f-center">
				<view class="flex f-align">
					<image src="../static/img/hand.png"></image>
					<text class="font20 gray333 ml10">手工洗护</text>
				</view>
				<view class="line1"></view>
				<view class="flex f-align">
					<image src="../static/img/jiankong.png"></image>
					<text class="font20 gray333 ml10">全程监控</text>
				</view>
				<view class="line1"></view>
				<view class="flex f-align">
					<image src="../static/img/line.png"></image>
					<text class="font20 gray333 ml10">工序严格</text>
				</view>
				<view class="line1"></view>
				<view class="flex f-align">
					<image src="../static/img/system.png"></image>
					<text class="font20 gray333 ml10">洗坏赔付</text>
				</view>
			</view>
			<image :src="item.url" style="width: 100%;" mode="widthFix" v-for="(item, index) in goodsInfo.detailArr" :key="index"></image>
		</view>

		<view class="detail-bottom flex f-align f-justifyB">
			<view class="cart-box flex f-column f-align" @click="toCartPage">
				<image src="../static/img/gw@2x.png"></image>
				<text class="font22 gray333">购物车</text>
				<view class="cart-num" v-if="cartNum > 0">{{cartNum}}</view>
			</view>
			<view class="flex">
				<view class="btn-box btn-gray f-center" @click="() => { handle = 'cart', $refs.uniPopup.open() }">
					<text class="font28 gray333 bold">加入购物车</text>
				</view>
				<view class="btn-box f-center" @click="() => { handle = 'buy', $refs.uniPopup.open() }">
					<text class="font28 white bold">立即购买</text>
				</view>
			</view>
		</view>

		<!-- 加入购物车 -->
		<uni-popup ref="uniPopup" type="bottom">
			<view class="service-box flex f-column">
				<image src="../static/img/close-blue.png" class="close-btn" @click="closePopup()"></image>
				<text class="font36" style="align-self: center;">增值服务</text>
				<view class="mt30 img-box flex f-align">
					<view class="inner-box">
						<image :src="goodsInfo.goodsUrl" mode=""></image>
					</view>
				</view>
				<text class="font28 gray333 mt40">必选项目</text>
				<view class="flex wrap">
					<view class="f-item active">清洗</view>
				</view>
				<text class="font28 gray333" style="margin-top: 70rpx;">增值服务</text>
				<text class="font22 gray999">(因修复价格不等，收到衣物后将根据项目进行划价，取衣时需支付额外费用，请您提前咨询客服了解修复价格，以免造成不便)</text>
				<view class="flex wrap">
					<view @click="selectProject(item)" class="f-item" :class="{'active': item.check}" v-for="(item,index) in itemList" :key="index">{{item.projectName}}</view>
				</view>
				<view v-if="handle == 'cart'" class="font32 white join-btn f-center" @click="addCart">加入购物车</view>
				<view v-if="handle == 'buy'" class="font32 white join-btn f-center" @click="buyHandle">立即购买</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import parseHtml from '@/utils/html-parse.js'
	export default {
		data() {
			return {
				isfetch: false,
				goods_id: '',
				goodsInfo: {
					goodsName: '',
					goodsMoney: '',
					goodsUrl: '',
					detailArr: [],
					originalPrice: ''
				},

				discountShow: false,
				discountTitle: '',
				discountMoney: '',

				cartNum: 0,
				itemList: [],
				handle: ''
			}
		},
		onLoad(option) {
			this.goods_id = option.id
			this.getGoodsInfo()
			this.getCartList()
			this.getKindList()
		},
		methods: {
			buyHandle() {
				let arr = [{
					goodsName: this.goodsInfo.goodsName,
					goodsMoney: this.goodsInfo.goodsMoney,
					goodsUrl: this.goodsInfo.goodsUrl,
					goodsNumber: 1,
					projects: this.itemList.filter(item => {
						return item.check
					}),
					isUseDiscounts: this.goodsInfo.isUseDiscounts
				}]
				uni.setStorage({
					key: 'submitInfo',
					data: JSON.stringify(arr),
					success: () => {
						this.closePopup()
						this.$api.toPage('./submitOrder')
					}
				})
			},
			addCart() {
				this.$clickHandle.notClickMore({
					key: 'addCart',
					time: 2000,
					success: () => {
						let arr = []
						this.itemList.forEach(item => {
							if (item.check) {
								arr.push(item.id)
							}
						})
						this.$http.ajax({
							url: '/ShoppingTrolley/add',
							params: {
								'goodsId': this.goods_id,
								'projectId': arr.join(','),
								'goodsNumber': 1,
								'openId': uni.getStorageSync('openId')
							},
							isOP: 0
						}).then((res) => {
							if (res.code == 200) {
								this.getCartList()
								this.$api.msg('加入购物车成功')
								this.closePopup()
							} else {
								this.$api.msg(res.msg)
							}
						})
					}
				})
			},
			closePopup() {
				this.itemList.forEach(item => item.check = false)
				this.$refs.uniPopup.close()
			},
			selectProject(item) {
				item.check = !item.check
				this.$forceUpdate()
			},
			getKindList() {
				this.$http.ajax({
					url: '/Project/list',
					params: {
						page: 1,
						limit: 99
					},
					isOP: 0
				}).then((res) => {
					if (res.code == 200) {
						res.data.forEach(item => item.check = false)
						this.itemList = res.data
					}
				})
			},
			getCartList() {
				this.$http.ajax({
					url: '/ShoppingTrolley/list',
					params: {
						openId: uni.getStorageSync('openId')
					}
				}).then((res) => {
					if (res.code == 0 && res.count > 0) {
						this.cartNum = res.data.reduce((a, b) => {
							return a + b.goodsNumber
						}, 0)
					}
				})
			},
			toCartPage() {
				uni.switchTab({
					url: '/pages/cart'
				})
			},
			telCallHandle() {
				uni.makePhoneCall({
					phoneNumber: '15617812345'
				})
			},
			getGoodsInfo() {
				this.$http.ajax({
					url: '/Goods/list',
					params: {
						id: this.goods_id
					}
				}).then((res) => {
					console.log("详情");
					console.log(res);
					this.isfetch = true
					if (res.code == 0) {
						let info = res.data[0]
						this.goodsInfo.goodsUrl = info.goodsUrl
						this.goodsInfo.goodsName = info.goodsName
						this.goodsInfo.goodsMoney = info.goodsMoney
						this.goodsInfo.originalPrice = info.originalPrice
						this.goodsInfo.isUseDiscounts = info.isUseDiscounts
						if (info.goodsDetails) {
							this.goodsInfo.detailArr = JSON.parse(info.goodsDetails)
						}
					} else {
						this.$api.msg(res.msg)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.bottom-box {
		padding: 15rpx 35rpx;
		margin-top: 50rpx;
		margin-bottom: 50rpx;
		
		.font20 {
			font-size: 20rpx;
			line-height: 20rpx;
		}
		
		image {
			width: 18rpx;
			height: 20rpx;
		}
	
		.line1 {
			width: 0rpx;
			height: 20rpx;
			border-left: 1rpx solid #777777;
			margin: 0 30rpx;
		}
	}
	
	.service-box {
		width: 750rpx;
		background: #ffffff;
		padding: 40rpx 32rpx;
		border-radius: 60rpx 60rpx 0 0;
		position: relative;
		
		.img-box {
			width: 686rpx;
			height: 264rpx;
			border-radius: 12rpx;
			background-size: 100% 100%;
			padding-left: 50rpx;
			background-image: url('https://xx.img.dz888.shop/wx1.jpg');
			.inner-box {
				width: 170rpx;
				height: 170rpx;
				background: #3D99FE;
				border: 1rpx solid #FFFFFF;
				box-shadow: 2rpx 4rpx 11rpx 0rpx rgba(20,65,143,0.45);
				border-radius: 14rpx;
				
				image {
					width: 100%;
					height: 100%;
					border-radius: 14rpx;
				}
			}
		}
		
		.f-item {
			width: 130rpx;
			height: 60rpx;
			background: #EBEBEB;
			border-radius: 8rpx;
			font-size: 24rpx;
			line-height: 60rpx;
			color: #777777;
			text-align: center;
			margin-right: 55rpx;
			margin-top: 20rpx;

			&:nth-child(4n) {
				margin-right: 0;
			}
		}

		.active {
			background: #4082FF;
			color: #FFFFFF;
		}

		.join-btn {
			width: 686rpx;
			height: 72rpx;
			background: #4082FF;
			border-radius: 38rpx;
			box-shadow: 0rpx -6rpx 12rpx rgba(24, 70, 157, 0.1);
			margin-top: 100rpx;
		}

		.close-btn {
			width: 59rpx;
			height: 59rpx;
			position: absolute;
			right: 28rpx;
			top: 28rpx;
			z-index: 99;
		}
	}

	.detail-bottom {
		width: 672rpx;
		height: 100rpx;
		border-top: 2rpx solid #EAEAEA;
		padding-left: 46rpx;
		padding-right: 32rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		position: fixed;
		right: 0;
		bottom: 0;
		background: #FFFFFF;
		box-sizing: content-box;

		.cart-box {
			position: relative;

			image {
				width: 48rpx;
				height: 48rpx;
			}

			.cart-num {
				width: 32rpx;
				height: 32rpx;
				background: #FE0000;
				border-radius: 50%;
				font-size: 22rpx;
				font-weight: 500;
				line-height: 32rpx;
				color: #FFFFFF;
				text-align: center;
				position: absolute;
				left: -10rpx;
				top: -10rpx;
				z-index: 10;
			}
		}

		.btn-box {
			width: 220rpx;
			height: 70rpx;
			background: #4082FD;
			border-radius: 36rpx;
			margin-left: 20rpx;
		}

		.btn-gray {
			background: #DFDFDF;
		}
	}

	.detail-desc {
		width: 710rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 20rpx;
		margin-left: 20rpx;
		padding: 20rpx;
	}

	.ql-container {
		min-height: 100rpx !important;
		height: auto;
	}

	.ql-container img {
		display: block;
	}

	.detail-font {
		padding: 56rpx 50rpx 30rpx;

		.line {
			width: 200rpx;
			height: 2rpx;
			background-color: #DEDEDE;
			border-radius: 1rpx;
		}
	}

	.detail-guige {
		height: 100rpx;
		background: rgba(255, 255, 255, 1);
		padding: 0 20rpx;
		border-left: 10rpx solid #E7441E;
		margin-top: 20rpx;
	}

	.detail-info {
		width: 686rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 12rpx rgba(64, 130, 253, 0.3);
		border-radius: 24rpx;
		padding: 46rpx 40rpx;
		position: absolute;
		left: 32rpx;
		top: 436rpx;
		z-index: 99;

		.line {
			width: 100%;
			height: 1rpx;
			background-color: #AAAAAA;
			margin: 40rpx 0 20rpx;
		}

		.info-r {
			padding: 20rpx 0 8rpx 30rpx;
			border-left: 1rpx solid #AAAAAA;
		}
	}

	.custom-nav {
		width: 750rpx;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 100;

		.nav-bar {
			height: 44px;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title-bar {
				width: 242rpx;
				height: 44px;
				display: flex;
				flex-wrap: wrap;
				padding-top: 30rpx;

				.f-center {
					width: 120rpx;
				}

				.line-bar {
					width: 58rpx;
					height: 6rpx;
					background: rgba(245, 190, 35, 1);
					border-radius: 3rpx;
					transition-duration: 0.3s;
				}
			}

		}
	}

	.detail-banner {
		position: relative;

		.banner-swiper {
			width: 100%;
			height: 500rpx;

			.banner-item {
				width: 100%;
				height: 100%;
				overflow: hidden;
			}

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.container {
		padding: 0;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
	}
</style>
